<template>
  <div>
    <el-form :model="formData" ref="form" label-position="left">
      <el-table :data="formData.sysAutocodeItems" style="width: 100%;" class="sort-table mg-top20" v-bind="$attrs"
        row-key="id" v-on="$listeners" @cell-mouse-enter="(row) => { row.hover = true }" @cell-mouse-leave="(row) => { row.hover = false }">
        <el-table-column width="60" class="cup" label="排序" prop="sort">
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" class="cup" label="列名" prop="columnName" width="200"></el-table-column>
        <el-table-column :show-overflow-tooltip="true" class="cup" label="说明" prop="columnComment" width="120"></el-table-column>
        <el-table-column :show-overflow-tooltip="true" class="cup" label="列表字段" width="120">
          <template slot-scope="scope">
            <el-checkbox v-model="scope.row.needList" :true-label="'1'" :false-label="'0'"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" class="cup" label="查询" width="60">
          <template slot-scope="scope">
            <el-checkbox v-model="scope.row.needSearch" :true-label="'1'" :false-label="'0'"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" class="cup" label="查询匹配方式" min-width="120">
          <template slot-scope="scope">
            <el-form-item label=" " :prop="'sysAutocodeItems.' + scope.$index + '.searchType'" :rules="{ required: scope.row.needSearch === '1', message: '', trigger: 'blur' }">
              <el-select v-model="scope.row.searchType" filterable>
                <el-option label="=" value="eq"></el-option>
                <el-option label="between" value="between"></el-option>
                <el-option label="like" value="like"></el-option>
                <el-option label=">=" value="ge">
                </el-option>
                <el-option label="<=" value="le"></el-option>
                <el-option label=">" value="gt"></el-option>
                <el-option label="<" value="lt"></el-option>
              </el-select>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" class="cup" label="排序" width="60">
          <template slot-scope="scope">
            <el-checkbox v-model="scope.row.needOrder" :true-label="'1'" :false-label="'0'"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" class="cup" label="排序方式" min-width="120">
          <template slot-scope="scope">
            <el-form-item label=" " :prop="'sysAutocodeItems.' + scope.$index + '.orderType'" :rules="{ required: scope.row.needOrder === '1', message: '', trigger: 'blur' }">
              <el-select v-model="scope.row.orderType" filterable>
                <el-option label="asc" value="asc"></el-option>
                <el-option label="desc" value="desc"></el-option>
              </el-select>
            </el-form-item>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <span class="beforeBtn" @click="last">上一步</span>
      <span class="closeBtn" @click="cancel">取消</span>
      <el-button class="minWid btn btn-outline-primary ml-3" @click="next">保存</el-button>
    </div>
  </div>
</template>

<script>
  import addEdit from './addEdit';
  import Sortable from 'sortablejs'

  import {
    getAllTables
  } from '@/api/adminPage/sysAutoCode';

  export default {
    name: 'autoCode',
    props: {
      from: {
        type: Object,
        require: true,
        default: () => {}
      },
      formData: {
        type: Object,
        require: true
      }
    },

    data() {
      return {

      };
    },
    mounted() {
      // 阻止默认行为
      document.body.ondrop = function(event) {
        event.preventDefault()
        event.stopPropagation()
      }
    },
    created() {},
    methods: {
      cancel() {
        //初始化一些属性
        this.$emit('cancel');
      },
      last() {
        this.$emit('last');
      },
      next() {
        this.$refs['form'].validate(valid => {
          if (valid) {
            this.$emit('next', this.formData);
          }
        });
      }
    }
  };
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  ::v-deep .el-input.is-disabled .el-input__inner,
  ::v-deep .el-textarea.is-disabled .el-input__inner {
    background-color: #eff2f7 !important;
    border: 1px solid #ced4da !important;
    color: #74788d !important;
    padding: 0 12px !important;

    &::-webkit-input-placeholder {
      color: #74788d !important;
    }
  }

  .forms {
    max-height: calc(100vh - 360px);
    margin-top: 1.875rem;
  }

  .mg-top20 {
    margin-top: 25px;
    margin-bottom: 35px;
  }

  ::v-deep .el-form-item__label {
    font-size: 13px;
    color: #495057;
    font-weight: 500;
    line-height: 32px;
    padding: 0 12px 0 0;
    margin: 0;
    text-align: right;
    float: left;
  }

  ::v-deep .dialog-footer {
    border-top: 1px solid #eff2f7 !important;
    padding: 16px !important;
    margin-top: 16px;
  }

  .minWid {
    min-width: 108px;
  }

  .forms {
    padding-right: 0;
    max-height: calc(100vh - 360px);
  }

  .beforeBtn {
    float: left;
    line-height: 32px;
    color: #556de5;
    cursor: pointer;
  }

  .closeBtn {
    line-height: 32px;
    color: #73778d;
    cursor: pointer;
  }

  .title-h3 {
    font-weight: bold;

    span {
      padding-right: 10px;
      color: red;
    }
  }

  ::v-deep .el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap>.el-form-item__label,
  .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label {
    &:after {
      content: '';
      margin-left: 0px;
    }

    &:before {
      content: '*';
      color: #f46a6a;
      margin-right: 4px;
    }
  }

  ::v-deep .el-form-item__label {
    font-size: 13px;
    color: #495057;
    font-weight: 500;
    line-height: 32px;
    padding: 0 0px 0 0;
    margin: 0;
    text-align: right;
    float: left;
  }

  ::v-deep .el-form-item--small.el-form-item {
    margin-bottom: 0px;
  }

  ::v-deep .el-form-item--small .el-form-item__content {
    float: right;
    line-height: 32px;
    width: 90%;
  }
</style>
